<template>
  <div id="container">
    <!--文章分类-->
    <div :class="['article-category', (category.length < 11) ? 'isShowScroll' : '']">
      <ul>
        <li v-for="(item, index) in category"
            :key="index"
            :class="[(index === selectedCategory) ? 'active' : '']"
        >
          <div class="article-category-item" @click="switchCategory(index)">
            <!--<a href="#container">{{item.fileName}}</a>-->
            {{item.name}}
          </div>
        </li>
        <!--<li>-->
        <!--<div class="article-category-item" @click="showMoreCategory" v-show="showCategoryItems <= category.length">-->
        <!--&lt;!&ndash;<a href="#container">{{item.fileName}}</a>&ndash;&gt;-->
        <!--加载更多-->
        <!--</div>-->
        <!--</li>-->
      </ul>
    </div>

    <!--文章分类详情-->
    <div class="article-category-detail">
      <ul>
        <li v-for="(item, index) in articleList" :key="index">
          <div class="article-category-detail-container">
            <div>
              <span class="article-category-detail-num">{{index + 1}}. </span>
              <span class="article-category-detail-title">
                <!--文件路径：用户名/分类/文件名-->
                <router-link :to="{ path: item.fileAuthor + '/' + item.category + '/' + item.fileName,
                params: {
                  author: item.fileAuthor,
                  category: item.category,
                  fileName: item.fileName
                }}">
                  <a href="#" style="color: #303030">{{item.fileName}}</a>
                </router-link>
              </span>
            </div>
            <span class="article-category-detail-time">{{item.lastModified}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import Axios from '../../utils/axios';
  import Cookies from "../../utils/cookies";
  import Constant from "../../utils/constant";
  import Formatutil from "../../utils/formatutil";

  export default {
    name: "article-category",
    data: function () {
      return {
        // 当前选择的分类
        selectedCategory: 0,
        // 请求文章作者
        author: 'mazaiting',
        // 全部分类
        category: [
          // {fileName: "Algorithm", fileSize: 0, lastModified: 1533873419112, path: "", hidden: false},
          // {fileName: "Android", fileSize: 0, lastModified: 1533873419132, path: "", hidden: false}
        ],
        // 文章列表
        articleList: [
          // {fileName: "Algorithm", fileSize: 0, lastModified: 1533873419112, path: "", hidden: false},
          // {fileName: "Android", fileSize: 0, lastModified: 1533873419132, path: "", hidden: false}
        ]
      };
    },
    created: function () {
      this.getArticleCategory();
    },
    methods: {
      /** 获取文章分类 */
      getArticleCategory: function () {
        const _this = this;
        // 用户信息数组
        let loginInfoEscape = Cookies.getCookie(Constant.LOGIN_INFO);
        // 判断登陆信息是否为空
        if (null != loginInfoEscape) {
          // 转移存储的信息
          let loginInfo = JSON.parse(decodeURIComponent(loginInfoEscape));
          // 赋值作者
          this.author = loginInfo.username;
        }
        Axios.get(Constant.URL_ARTICLE + '/' + this.author)
          .then((res) => {
            // console.log(res);
            let data = res.data;
            // 请求成功
            if (1 === data.ret) {
              // console.log(data.data);
              // 修改数组内容
              _this.category = data.data.filter(function (item) {
                return item
              });
              if (_this.category.length > 0) this.getArticleList();
            } else {
              alert('服务异常');
            }
          })
          .catch((e) => {
            console.log(e);
          });
      },
      // 滚动到指定位置
      scrollToTop: function () {
        // 获取网页窗体
        let html = $('html');
        // 获取滚动内容
        let container = $('#container');
        if (html[0].scrollTop > container[0].offsetTop) {
          // 监听滚动
          // $(window).scroll(function () {
          //   if ($(this).scrollTop() !== 0) {
          //     $('#container').fadeIn();
          //   } else {
          //     $('#container').fadeOut();
          //   }
          // });
          // jQuery滚动
          html.animate({scrollTop: container[0].offsetTop}, 500);
          // 滚动到底部
          // window.scrollTo(0, container.offsetTop);
        }
      },
      /** 切换分类 */
      switchCategory: function (index) {
        this.selectedCategory = index;
        this.getArticleList();
        // this.scrollToTop();
      },
      /** 获取文章列表 */
      getArticleList: function () {
        let category = this.category[this.selectedCategory];
        // 请求文章路径
        let netPath = Constant.URL_ARTICLE + '/' + this.author + '/' + category.name;
        // console.log(netPath);
        const _this = this;
        Axios.get(netPath)
          .then((res) => {
            // console.log(res);
            let data = res.data;
            // 请求成功
            if (1 === data.ret) {
              console.log(data.data);
              _this.articleList = data.data.filter(function (item) {
                // 赋值文章作者
                item.fileAuthor = _this.author;
                // 赋值文章分类
                item.category = category.name;
                // 格式化文件名
                item.fileName = Formatutil.formatFileName(item.fileName);
                // 格式化修改时间
                item.lastModified = Formatutil.formatDate(item.lastModified);
                return item
              });
            } else {
              alert('服务异常');
            }
          })
          .catch((e) => {
            console.log(e);
          });
      }
    }
  }
</script>

<style scoped>
  /* 文章分类 */
  .article-category {
    background: #DDD8;
    float: left;
    margin-left: 5%;
    margin-top: 3%;
    width: 20%;
    border-radius: 10px;
    line-height: 30px;
    overflow-y: scroll;
    height: 500px
  }
  /* 是否显示滚动条 */
  .isShowScroll {
    overflow-y: hidden;
    height: 1%
  }

  .article-category > ul {
    /*清楚圆点*/
    list-style-type: none;
    margin-bottom: 0;
  }

  .article-category > ul > li {
    margin-bottom: 1px;
    font-family: 'Microsoft JhengHei UI', monospace;
    font-size: 16px;
    text-align: left;
    /*margin-left: -40px;*/
    line-height: 40px;
    border-bottom: white solid 1px;
  }

  /*悬停*/
  .article-category > ul > li :hover {
    /*设置小手*/
    cursor: pointer;
  }

  .article-category-item {
    margin-left: 20px;
    background: transparent;
    text-decoration: none;
    border: none;
  }

  .article-category-item > a {
    text-decoration: none;
    color: black;
  }

  .active {
    background: rgba(255, 0, 0, 0.7);
  }

  .active > div > a {
    color: white;
  }

  .article-category-detail {
    background: #DDDD;
    float: right;
    width: 64%;
    margin-right: 3%;
    margin-top: 3%;
    border-radius: 3px;
  }

  .article-category-detail > ul {
    list-style-type: none;
    margin-bottom: 0;
  }

  .article-category-detail > ul > li {
    border-bottom: white solid 1px;
    /*margin-left: -40px;*/
  }

  .article-category-detail-container {
    height: 60px;
    margin-top: 5px;
    margin-bottom: -5px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .article-category-detail-num {
    font-size: 16px;
    margin-left: 5px;
    color: #303030;
  }

  .article-category-detail-title {
    font-size: 18px;
    margin-left: 2px;
    word-break: keep-all;
  }

  .article-category-detail-time {
    font-size: 14px;
    text-align: right;
    width: 30%;
    align-self: flex-end;
    margin-bottom: 5px;
    margin-right: 5px;
    color: #888;
  }
</style>
